<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://localhost/study/Down/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("#ss div").hide();
    $("#a1").show();
   $(window).scroll(function() {
       var position = $(this).scrollTop();
     var aa = parseInt($("#A").css("height"));
     var bb = parseInt($("#B").css("height"));
     var cc = parseInt($("#C").css("height"));

       if(position <= aa){
            $("#ss div").hide();
            $("#a1").show();
        }
        if(position > aa && position <= (aa + bb) ){
            $("#ss div").hide();
            $("#a2").show();
        }
        if(position >(aa + bb) && position <=(aa + bb + cc) ){
            $("#ss div").hide();
            $("#a3").show();
        }
        if( position > (aa + bb + cc) ){
            $("#ss").hide();
        }else{
            $("#ss").show();
        }
   });
});
 </script>
</HEAD>
<BODY>
 
<div id="ss" style="width:400px; height:100px; position:fixed; top:0px; right:0px; font-size:50px; border:1px solid red; background-color:#eeeeee;">
     <div id="a1">1 번 배너 111</div>
      <div id="a2">2 번 배너 222</div>
      <div id="a3">3 번 배너 333</div>
</div>
 
<div id="A" style="width:400px; height:500px; background-color:#ffdddd;">A 구간</div>
<div id="B" style="width:400px; height:300px; background-color:#ddffdd;">B 구간</div>
<div id="C" style="width:400px; height:400px; background-color:#ddddff;">C 구간</div>
<div style="height:1000px;">ddd</div>
 
</BODY>
</HTML>